import React from 'react';
import PropTypes from 'prop-types';
import {Card, Button, Row, Col, Table} from 'antd';
import {TABLE, DATE_FORMAT} from '../constants';
import {hasPermissions} from './utils';
import {conventEnumValueToString, formatDateTime, formatPercent} from '../utils';
import DescriptionList from 'ant-design-pro/lib/DescriptionList';
import {PERMISSION} from './constants';
import {agentKind, saleOrderPriceTerms, currency, baseDataStatus, saleOrderType, saleOrderTransportType, paymentType} from '../Enum';
import routes from './routes';
import {getDetail} from './api';
import styles from './style.css';
const {Description} = DescriptionList;

export class DetailPanel extends React.PureComponent {
    state = {
        loading: false,
        data: {}
    };

    componentDidMount() {
        this.getDetailInfo();
    }

    getDetailInfo = () => {
        const id = this.props.id;
        this.setState({loading: true});
        getDetail(id)
            .then(res => {
                if(res.ok)
                    this.setState({
                        loading: false,
                        data: res.data,
                    });
                else
                    this.setState(({
                        loading: false
                    }));
            });
    }

    handleUpdateClick = () => {
        this.props.history.push(routes.update.format(this.props.id));
    }

    handleSettingClick = () => {
        this.props.history.push(routes.setting.format(this.props.id));
    }
    render() {
        const detailData = this.state.data || {};
        const dealerSaleInformationDetails = this.state.data.dealerSaleInformationDetails || [];
        const dealerSalesColumns = [
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.brandCode',
                    defaultMessage: '品牌'
                }),
                dataIndex: 'brandCode',
                render: (text, record) => `(${record.brandCode}) ${record.brandName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.tradeMethodCode',
                    defaultMessage: '贸易方式'
                }),
                dataIndex: 'tradeMethodCode',
                render: (text, record) => `(${record.tradeMethodCode}) ${record.tradeMethodName}`
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.priceClause',
                    defaultMessage: '价格条款'
                }),
                dataIndex: 'priceClause',
                render: text => conventEnumValueToString(saleOrderPriceTerms, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.currency',
                    defaultMessage: '结算币种'
                }),
                dataIndex: 'currency',
                render: text => conventEnumValueToString(currency, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.orderType',
                    defaultMessage: '订单类型'
                }),
                dataIndex: 'orderType',
                render: text => conventEnumValueToString(saleOrderType, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.transportType',
                    defaultMessage: '运输方式'
                }),
                dataIndex: 'transportType',
                render: text => conventEnumValueToString(saleOrderTransportType, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.paymentType',
                    defaultMessage: '付款方式'
                }),
                dataIndex: 'paymentType',
                render: text => conventEnumValueToString(paymentType, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.account',
                    defaultMessage: '到付账号'
                }),
                dataIndex: 'account',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.carrierName',
                    defaultMessage: '货代名称'
                }),
                dataIndex: 'carrierName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.shippingPortName',
                    defaultMessage: '发运港口'
                }),
                dataIndex: 'shippingPortName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.destinationPort',
                    defaultMessage: '目的港口'
                }),
                dataIndex: 'destinationPort',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.deliveryDate',
                    defaultMessage: '需求交期'
                }),
                dataIndex: 'deliveryDate'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.theoreticalStoreSaleRatio',
                    defaultMessage: '理论总存销比'
                }),
                dataIndex: 'theoreticalStoreSaleRatio',
                render: text => formatPercent(text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.deliveryPlanDeliveryCycleMonth',
                    defaultMessage: '发运计划物流周期月数'
                }),
                dataIndex: 'deliveryPlanDeliveryCycleMonth'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.receiveDeliveryCycleMonth',
                    defaultMessage: '新到货物流周期月数'
                }),
                dataIndex: 'receiveDeliveryCycleMonth'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.inTransitDeliveryCycleMonth',
                    defaultMessage: '在途物流周期月数'
                }),
                dataIndex: 'inTransitDeliveryCycleMonth'
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.kdPackingAttribute',
                    defaultMessage: 'KD包装属性'
                }),
                dataIndex: 'kdPackingAttribute',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.pdIExpenseStandard',
                    defaultMessage: 'PDI费用标准'
                }),
                dataIndex: 'pdiExpenseStandard',
            },
            
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.remark',
                    defaultMessage: '备注'
                }),
                dataIndex: 'remark',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.effectiveDate',
                    defaultMessage: '生效日期'
                }),
                dataIndex: 'effectiveDate',
                render: text => formatDateTime(text, DATE_FORMAT)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.expirationDate',
                    defaultMessage: '失效日期'
                }),
                dataIndex: 'expirationDate',
                render: text => formatDateTime(text, DATE_FORMAT)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.status',
                    defaultMessage: '状态'
                }),
                dataIndex: 'status',
                render: text => conventEnumValueToString(baseDataStatus, text)
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.abandonerName',
                    defaultMessage: '作废人姓名'
                }),
                dataIndex: 'abandonerName',
            },
            {
                title: this.props.intl.formatMessage({
                    id: 'commonDetail.colums.abandonTime',
                    defaultMessage: '作废时间'
                }),
                dataIndex: 'abandonTime',
                render: text => formatDateTime(text, DATE_FORMAT)
            },
        ];

        const {options} = detailData;
        const {formatMessage} = this.props.intl;
        const operations = [];
        if(hasPermissions(this.props.permissions, PERMISSION.update) && hasPermissions(options, PERMISSION.update))
            operations.push(<Button key="update" onClick={this.handleUpdateClick} size="small">{
                formatMessage({
                    id: 'detailPage.btn.update',
                    defaultMessage: '编辑'
                })
            }</Button>);
        if(hasPermissions(this.props.permissions, PERMISSION.setting) && hasPermissions(options, PERMISSION.setting))
            operations.push(<Button key="setting" onClick={this.handleSettingClick} size="small">{
                formatMessage({
                    id: 'detailPage.btn.setting',
                    defaultMessage: '物流周期设置'
                })
            }</Button>);
        return (
            <div className={styles.detail}>
                <Card loading={this.state.loading}>
                    <DescriptionList size="large" title={<Row><Col span={12}>{
                        formatMessage({
                            id: 'detailPage.card.tradeMethodmessage',
                            defaultMessage: '基本信息'
                        })
                    }</Col>
                    <Col className={`col-align-right ${styles.detail}`} span={12}>{operations}</Col>
                    </Row>}>
                        <Description term={formatMessage({
                            id: 'detailPage.data.code',
                            defaultMessage: '编号',
                        })}>{detailData.code}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.name',
                            defaultMessage: '名称'
                        })}>{detailData.name}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.shortCode',
                            defaultMessage: '简码',
                        })}>{detailData.shortCode}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.shortName',
                            defaultMessage: '简称'
                        })}>{detailData.shortName}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.kind',
                            defaultMessage: '总代分类',
                        })}>{conventEnumValueToString(agentKind, detailData.kind)}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.area',
                            defaultMessage: '区域'
                        })}>{detailData.area}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.country',
                            defaultMessage: '国家'
                        })}>{detailData.country}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.province',
                            defaultMessage: '省份',
                        })}>{detailData.province}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.city',
                            defaultMessage: '城市'
                        })}>{detailData.city}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.contactNumber',
                            defaultMessage: '联系电话'
                        })}>{detailData.contactNumber}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.fax',
                            defaultMessage: '传真'
                        })}>{detailData.fax}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.address',
                            defaultMessage: '联系地址'
                        })}>{detailData.address}</Description>
                        <Description term={formatMessage({
                            id: 'detailPage.data.zipCode',
                            defaultMessage: '邮政编码'
                        })}>{detailData.zipCode}</Description>
                    </DescriptionList>
                </Card>
                <Card
                    title={this.props.intl.formatMessage({
                        id: 'detailPage.dealerSaleInformation.title',
                        defaultMessage: '总代整车经营权限清单'
                    })}
                    bordered={false}>
                    <Table
                        className="white-space-nowrap"
                        rowKey="id"
                        columns={dealerSalesColumns}
                        pagination={false}
                        dataSource={dealerSaleInformationDetails} {...TABLE} />
                </Card>
                <div className="page-toolbar">
                    <Button
                        type="primary"
                        disabled={this.state.loading}
                        onClick={this.props.onCancel}>{formatMessage({
                            id: 'detailPage.btn.return',
                            defaultMessage: '返回'
                        })}</Button>
                </div>
            </div>
        );
    }
}

DetailPanel.propTypes = {
    id: PropTypes.string.isRequired,
    permissions: PropTypes.array.isRequired,
    onCancel: PropTypes.func.isRequired,
    history: PropTypes.object,
    intl: PropTypes.object,
    successReturn: PropTypes.func,
};

import {connect} from 'react-redux';
import {tableSearch} from './actions';
import {injectIntl} from './intl';
import selectorFactory from 'Shared/utils/immutableToJsSelectorFactory';

const getPermissions = selectorFactory(['page', 'domainData', 'permission', 'data']);
const mapStateToProps = (state, props) => ({
    id: props.id,
    permissions: getPermissions(state),
});
const mapDispatchToProps = (dispatch, props) => ({
    onCancel: () => {
        props.history.push(routes.query.url());
    },
    successReturn: () => {
        dispatch(tableSearch());
        props.history.push(routes.query.url());
    },
});
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(DetailPanel));
